<template>
  <div class="createPost-container">
    <sticky :className="'sub-navbar'" :z-index="$upZindex">

      <el-button v-loading="loading" style="margin-left: 10px;" type="success" @click="submitForm"  >{{$t('table.submit')}}
      </el-button>

    </sticky>

    <el-form class="form-container" :model="postForm" :rules="rules" ref="postForm" label-position="right" label-width="100px" style='width: 60%; margin-left:60px;margin-top:20px;'>
        供应商信息
      <el-form-item label="用户名" prop="id">
        <el-input v-model="postForm.id" style="width: 200px"></el-input>
      </el-form-item>
      <el-form-item label="用户名" prop="usrName">
        <el-input v-model="postForm.usrName" style="width: 200px"></el-input>
      </el-form-item>
      <el-form-item label="简称" prop="abbreviation">
        <el-input v-model="postForm.abbreviation" style="width: 200px"></el-input>
      </el-form-item>
      <el-form-item label="机构类型" prop="organizationType">
        <el-select clearable style="width: 120px" class="filter-item" v-model="postForm.organizationType" :placeholder="$t('请选择')" >
          <el-option v-for="item in organizationTypeOptions" :key="item.key" :label="item.label" :value="item.key">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="供应商类型" prop="supplyType">
        <el-select clearable style="width: 120px" class="filter-item" v-model="postForm.supplyType" :placeholder="$t('请选择')" >
          <el-option v-for="item in supplyTypeOptions" :key="item.key" :label="item.label" :value="item.key">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="合作状态" prop="status">
        <el-select clearable style="width: 120px" class="filter-item" v-model="postForm.status" :placeholder="$t('请选择')" >
          <el-option v-for="item in statusOptions" :key="item.key" :label="item.label" :value="item.key">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="评级" prop="supplyLevel">
        <el-select clearable style="width: 120px" class="filter-item" v-model="postForm.supplyLevel" :placeholder="$t('请选择')" >
          <el-option v-for="item in supplyLevelOptions" :key="item.key" :label="item.label" :value="item.key">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="对接人" prop="personId">
        <el-select clearable style="width: 120px" class="filter-item" v-model="postForm.personId" :placeholder="$t('请选择')" >
          <el-option v-for="item in linkManOptions" :key="item.key" :label="item.label" :value="item.key">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="入驻日期" prop="entryDate">
        <el-date-picker
          v-model="postForm.entryDate"
          type="date"
          :format="yyyy-MM-dd"   value-format="yyyy-MM-dd"
          placeholder="">
        </el-date-picker>
      </el-form-item>
      主体信息
      <el-form-item label="官方名称" prop="companyName">
        <el-input v-model="postForm.companyName" style="width: 200px"></el-input>
      </el-form-item>

      <el-form-item label="Logo" prop="logoImg">
        <pan-thumb :image="image"></pan-thumb>
        <el-button type="primary" icon="upload" style="position: absolute;bottom: 15px;margin-left: 40px;" @click="imagecropperShow=true">更换Logo
        </el-button>
        <image-cropper :width="300" :height="300" url="https://httpbin.org/post" @close='close' @crop-upload-success="cropSuccess" langType="en"
                       :key="imagecropperKey" v-show="imagecropperShow"></image-cropper>
      </el-form-item>

      <el-form-item label="供应商地址" prop="address">
        <el-input v-model="postForm.address" style="width: 300px"></el-input>(选填)
      </el-form-item>

      <el-form-item label="背景特点" prop="background">
        <textarea maxlength="200" @input="descInput" v-model="postForm.background" style="width: 300px;height: 80px"/>
        <span>{{remnant}}/200</span>(选填)
      </el-form-item>
      联系人信息
      <div id="app">
        <div style="width: 500px;height: 250px;background: aliceblue;margin-top: 10px;margin-bottom: 10px" v-for="(list,index) in lists" :key="index">
          <el-form-item label="姓名" prop="linkName">
            <el-input v-model="lists[index].linkName" style="width: 300px" ></el-input>
          </el-form-item>
          <el-form-item label="电话" prop="linkMobile">
            <el-input v-model="lists[index].linkMobile" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="linkMail">
            <el-input v-model="lists[index].linkMail" style="width: 300px"></el-input>(选填)
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="lists[index].remark" style="width: 300px"></el-input>(选填)
          </el-form-item>
        </div>
        <button v-on:click="add">添加联系人</button>
      </div>

    </el-form>
</div>
</template>

<script>
  import Sticky from '@/components/Sticky' // 粘性header组件
  import {
    infoSupplyInfo,
    fetchLinkManList,
    createSupplyInfo
  } from '@/api/supply/supplyInfo'
  import ImageCropper from '@/components/ImageCropper'
  import PanThumb from '@/components/PanThumb'
  const defaultForm = {
    code: ''
  }

  export default {
    name: 'supplyInfoAdd',
    components: { Sticky, ImageCropper, PanThumb },
    data() {
      return {
        lists: [{
          linkName: '',
          linkMobile: '',
          linkMail: '',
          remark: ''
        }],
        remnant: 200,
        imagecropperShow: false,
        imagecropperKey: 0,
        image: 'https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191',
        postForm: Object.assign({}, defaultForm),
        loading: false,
        rules: {
          // usrName: [{ required: true, message: '用户名不能为空', trigger: 'blur' }, { min: 5, max: 16, message: '长度在5-16之间' }],
          // abbreviation: [{ required: true, message: '简称不能为空', trigger: 'blur' }, { min: 5, max: 20, message: '长度在5-20之间' }],
          // organizationType: [{ required: true, message: '请选择机构类型', trigger: 'change' }],
          // supplyType: [{ required: true, message: '请选择供应商类型', trigger: 'change' }],
          // status: [{ required: true, message: '请选择合作状态', trigger: 'change' }],
          // supplyLevel: [{ required: true, message: '请选择供应商评级', trigger: 'change' }],
          // personId: [{ required: true, message: '请选择对接人', trigger: 'change' }],
          // entryDate: [{ required: true, message: '请选择入驻日期', trigger: 'change' }],
          // companyName: [{ required: true, message: '官方名称不能为空', trigger: 'blur' }, { min: 1, max: 30, message: '长度在1-30之间' }],
          // linkName: [{ required: true, message: '联系人不能为空', trigger: 'blur' }],
          // linkMobile: [{ required: true, message: '联系电话不能为空', trigger: 'blur' }]
        },
        listQuery: {
          supplyType: undefined,
          status: undefined,
          supplyLevel: undefined,
          organizationType: undefined
        },
        organizationTypeOptions: [{ label: '个人', key: 'GEREN' }, { label: '出版社', key: 'CHUBANSHE' }, { label: '出版公司', key: 'CHUBANGS' }, { label: '文化公司', key: 'WENHUAGS' }, { label: '平台', key: 'PINGTAI' }],
        supplyTypeOptions: [{ label: '综合供应商', key: 'ZONGHE' }, { label: '绘本供应商', key: 'HUIBEN' }, { label: '听书供应商', key: 'TINGSHU' }, { label: 'IP供应商', key: 'IP' }],
        supplyLevelOptions: [{ label: 'A级', key: 'A' }, { label: 'B级', key: 'B' }, { label: 'C级', key: 'C' }, { label: '默认', key: 'DEFAULT' }],
        statusOptions: [{ label: '已上线', key: 'SHANGXIAN' }, { label: '已提供内容', key: 'NEIRONG' }, { label: '已签约', key: 'QIANYUE' }, { label: '确认意向', key: 'YIXIANG' }, { label: '联系上', key: 'LIANXI' }, { label: '已搁置', key: 'GEZHI' }, { label: '已下线', key: 'XIAXIAN' }, { label: '合作结束', key: 'FAIL' }, { label: '待联系', key: 'WAIT' }],
        linkManOptions: []
      }
    },
    computed: {
      contentShortLength() {
        return this.postForm.content_short.length
      }
    },
    created() {
      const id = this.$route.query.id
      if (id != null) {
        infoSupplyInfo(id).then(response => {
          this.postForm = Object.assign({}, response.content) // copy obj
        })
      }
      this.getLinkManList()
    },
    methods: {
      add: function() {
        const cope = {
          linkName: '',
          linkMobile: '',
          linkMail: '',
          remark: ''
        }
        this.lists.push(cope)
      },
      descInput() {
        var txtVal = this.postForm.background.length
        this.remnant = 200 - txtVal
      },
      cropSuccess(resData) {
        this.imagecropperShow = false
        this.imagecropperKey = this.imagecropperKey + 1
        this.image = resData.files.avatar
      },
      close() {
        this.imagecropperShow = false
      },
      getLinkManList() {
        this.listLoading = true
        fetchLinkManList().then(response => {
          if (response.success) {
            for (var a = 0; a < response.content.length; a++) {
              var aa = { label: response.content[a].userName, key: response.content[a].id }
              this.linkManOptions.push(aa)
            }
          }
        })
      },
      submitForm() {
        this.$refs['postForm'].validate((valid) => {
          if (valid) {
            for (var i = 0; i < this.lists.length; i++) {
              Object.assign(this.postForm, { 'supplyLinkMans': this.lists[i] })
            }
            // let params = {
            //   array
            // }
            // let supplyLinkMans=array;
            // Object.assign(this.postForm,{"supplyLinkMans":array})
            // let supplyLinkMansList

            createSupplyInfo(this.postForm).then((response) => {
              this.$notify({
                message: '提交成功',
                type: 'success',
                duration: 2000
              })
              this.$router.push({ name: 'supplyTable' })
            })
          }
        })
      }
    }
  }
</script>

<style scoped>
  .avatar{
    width: 200px;
    height: 200px;
    border-radius: 50%;
  }
</style>
